import React, { Component } from "react";
//这个Link是组件
//NavLink给谁就加active
import { Link, NavLink, BrowserRouter, Route } from "react-router-dom";
import Home from "./pages/Home"; //Home是路由组件
import About from "./pages/About"; //About是路由组件
import Header from "./components/Header"; //Header是一般组件
import MyNavLink from "./components/MyNavLink";
import "./App.css";

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <div className="page-header">
              <Header></Header>
            </div>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              {/* 原生htmo中靠<a>进行跳转不同的页面 */}
              {/* <a className="list-group-item active" href="./about.html">
                About
              </a>
              <a className="list-group-item" href="./home.html">
                Home
              </a> */}
              {/* 编写路由链接,这里就是导航区 */}
              <MyNavLink to="/about" title="About">
                About
              </MyNavLink>
              <MyNavLink to="/home" title="Home">
                Home
              </MyNavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {/* 注册路由 */}
                <Route path="/about" component={About} />
                <Route path="/home" component={Home} />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

// 路由的基本使用
/**
 * 1.明确好界面中的导航区，展示区
 * 2.导航区a标签改为Link标签
 *   <Link to="/xxxx">Demo</Link>
 * 3.展示区写Route标签进行路径的匹配
 *     <Route path='/xxxx' component={Demo} />
 * 4.<App>最外层包裹一个<BrowserRouter>或<HashRouter>
 */
